<!DOCTYPE html>
<html>
    <head>
    
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
    
    	<!-- scope to load css and js source files -->
    	{% load staticfiles %}
        <!--    jquery libs -->
    	<script type="text/javascript" src="{% static 'tutorial/js/jquery-2.2.1.js' %}"></script>
    
        <!--    jquery-ui libs -->
    	<script type="text/javascript" src="{% static 'tutorial/js/jquery-ui/jquery-ui.js'%}"></script>
    
        <!--    bootstrap core libs -->
        <script src="{% static 'tutorial/js/bootstrap.min.js' %}"></script>
    
        <!--    jquery-ui libs -->
    	<link rel="stylesheet" type="text/css" href="{% static 'tutorial/js/jquery-ui/jquery-ui.css'%}">
    
        <!--    bootstrap core css -->
        <link rel="stylesheet" href="{% static 'tutorial/css/bootstrap.min.css' %}" charset="utf-8"> 
    
        <!--    IE10 viewport hack for Surface/desktop windows 8 bug -->
        <link rel="stylesheet" href="{% static 'tutorial/css/ie10-viewport-bug-workaround.css' %}">
    
        <!--    customized style -->
    	<link rel="stylesheet" type="text/css" href="{% static 'tutorial/css/base.css'%}">
    
    	<!-- block to insert page title -->
    	<title>
    		{% block title %}
    			Base Title
    		{% endblock title%}
    	</title>
    
    	<!-- block to extend extra js script  -->
    	{% block head_js %}
    		<!-- extends javascript -->
    	{% endblock head_js %}
    
    	<!-- block to extend extra css styles -->
    	{% block head_css %}
    		<!-- extends styles-->
    	{% endblock head_css %}
    
    </head>
    <body>
    	<nav id="nav" class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">        
               <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expaned="false" aria-controls="navbar"> 
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
    
                <!--            <a class="navbar-brand" href="#">Project Name</a> -->
               </div> 
                <div id="navbar" class="collapse navbar-collapse">
                   <ul class="nav navbar-nav">
                       	<li class="active"><a href="#">Home</a></li> 
                    
                       	<li><a href="/tutorial/views/">Views</a></li>

    			      	<li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdow" href="#">Model>
                             <span class="caret"></span> 
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="/tutorial/models/model/">Model</a></li>
                                <li><a href="/tutorial/models/querysets/">QuerySets</a></li>
                                <li><a href="/tutorial/models/migration/">Migration</a></li>
                                <li><a href="/tutorial/models/advanced/">Advanced</a></li>
                                <li><a href="/tutorial/models/other/">Other</a></li>
                            </ul>
                        </li>
    			    	<li><a href="/tutorial/forms/">Forms</a></li>
    			    	<li><a href="/tutorial/templates/">Templates</a></li>
    			    	<li><a href="/tutorial/staticfiles/">Static Files</a></li>
    			    	<li><a href="/tutorial/autentication/">Autentication</a></li>
    			    	<li><a href="/tutorial/logging/">Logging</a></li>
    			    	<li><a href="/tutorial/testing/">Testing</a></li>
    			    	<li><a href="/tutorial/international/">International</a></li>
    			    	<li><a href="/tutorial/about/">About</a></li>
                                            
                       <!--here is place to insert extra nav items -->
    		            {% block nav %}
    		            {% endblock nav %} 
    
                   </ul> 
    
                   <!-- right side of navigatin bar -->
                   <ul class="nav navbar-nav navbar-right">
                   	    <li><a href="/tutorial/register/"><span class="glyphicon glyphicon-user"></span>Sign up</a></li>
                   	    <li><a href="/tutorial/login/"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
            		    <li><a href="{% url 'tutorial-logout' %} " id="logout">Logout</a></li>
                   </ul>
                </div>
            </div>
    	</nav>
    
    	<div id="sidebar">
    		{% block sidebar %}
    		{% endblock sidebar %}
    	</div>
    
    	<div id="container">
    		{% block content %}
    			Base content block
    		{% endblock content %}
    	</div>
    
        <!--    footer  -->
    	<nav id="nav" class="navbar navbar-inverse navbar-fixed-bottom">
    		{% block footer %}
    			Base footer block
    		{% endblock footer %}
    	</div>
    
    	{% block body_script %}
    	   <!-- write body script here  -->
    	{% endblock body_script %}
    </body>
</html>
